<template>
  <div style="display: flex; justify-content: space-between">
    <div class="left">
      <el-row :gutter="20" class="mgb20">
        <div class="t1">数据分析</div>
        <el-col :span="6" class="vol">
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-1">
              <i class="el-icon-mobile-phone grid-con-icon"></i>
              <div class="grid-cont-right">
                <div class="grid-num">
                  {{ data9.phoneLeftCount }}/{{ data9.phoneSeatCount }}
                </div>
                <div class="t8">手机坐席剩余数量</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-2">
              <i class="el-icon-timer grid-con-icon"></i>
              <div class="grid-cont-right">
                <div class="grid-num">
                  {{ data9.phoneLeftMealMinutes }}/{{ data9.phoneLeftMin }}
                </div>
                <div class="t8">剩余分钟(套餐/余额)</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-3">
              <i class="el-icon-service grid-con-icon"></i>
              <div class="grid-cont-right">
                <div class="grid-num">{{ data9.todayCallAllTimeSecond }}</div>
                <div class="t8">今日消耗时长(分钟)</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <div class="grid-content grid-con-4">
              <i class="el-icon-timer grid-con-icon"></i>
              <div class="grid-cont-right">
                <div class="grid-num">
                  {{ data9.todayValidCallCount }}/{{ data9.todatCallCount }}
                </div>
                <div class="t8">今日拨打统计</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card shadow="hover" class>
            <div class="index_Bottom">
              <div
                style="margin-bottom: 10px; font-size: 19px; font-weight: 700"
              >
                数据简报
              </div>
            </div>
            <div class="index_Data clearfix">
              <div class="box">
                <!-- <img src="../../assets/img/geren.png" alt /> -->
                <div class="box2" @click.stop="customer()">
                  <span class="t2">{{ customerData.count }}</span>
                  <span class="t3">客户总数</span>
                </div>
              </div>
              <div class="box">
                <!-- <img src="../../assets/img/daima.png" alt /> -->
                <div class="box2" @click.stop="customer(1)">
                  <span class="t2">{{ customerData.cooperated }}</span>
                  <span class="t3">成交客户(A类)</span>
                </div>
              </div>
              <div class="box">
                <!-- <img class="img" src="../../assets/img/loudou.png" alt /> -->
                <div class="box2" @click.stop="customer(2)">
                  <span class="t2">{{ customerData.intention }}</span>
                  <span class="t3">意向客户(B类)</span>
                </div>
              </div>
              <div class="box">
                <!-- <img src="../../assets/img/geren2.png" alt /> -->
                <div class="box2" @click.stop="customer(3)">
                  <span class="t2">{{ customerData.developed }}</span>
                  <span class="t3">跟踪客户(C类)</span>
                </div>
              </div>
              <div class="box" style="border: none">
                <!-- <img src="../../assets/img/chuizi.png" alt /> -->
                <div class="box2" @click.stop="customer(4)">
                  <span class="t2">{{ customerData.develop }}</span>
                  <span class="t3">新客户(D类)</span>
                </div>
              </div>
            </div>
            <div style="border-top: 1px solid #ddd" class="index_Data clearfix">
              <div class="box">
                <!-- <img src="../../assets/img/bohao.png" alt /> -->
                <div class="box2" @click.stop="customer(5)">
                  <span class="t2">{{ customerData.called }}</span>
                  <span class="t3">已跟踪客户(E类)</span>
                </div>
              </div>
              <div class="box">
                <!-- <img class="img2" src="../../assets/img/bohao2.png" alt /> -->
                <div class="box2" @click.stop="call">
                  <span class="t2">{{ customerData.remind }}</span>
                  <span class="t3">预约客户个数</span>
                </div>
              </div>
              <div class="box">
                <!-- <img src="../../assets/img/shizhong.png" alt /> -->
                <div class="box1">
                  <span class="t2">{{ data9.todayAveCallTimeMinute }}</span>
                  <span class="t3">今日平均有效通话时长</span>
                </div>
              </div>
              <div class="box">
                <!-- <img src="../../assets/img/paiming.png" alt /> -->
                <div class="box1">
                  <span class="t2">{{ data9.monthCallTime }}</span>
                  <span class="t3">本月累计时长</span>
                </div>
              </div>
              <div class="box" style="border: none">
                <!-- <img src="../../assets/img/paiming2.png" alt /> -->
                <div class="box1">
                  <span class="t2">{{ data9.todayCallTimeSecond }}</span>
                  <span class="t3">今日有效通话时长</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card shadow="hover" class>
            <div class="countCallNumber">
              <h6 style="margin-bottom: 10px; font-size: 19px">
                通话数据分析
                <!-- <span style="color:#aaa;font-size:19px;font=weight:normal">({{year}}-{{countCallNumberDataX[0]}}~{{year}}-{{countCallNumberDataX[countCallNumberDataX.length-1]}})</span> -->
                <el-date-picker
                  v-model="value88888"
                  type="month"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  @change="bindGetTime"
                  placeholder="选择年月"
                ></el-date-picker>
              </h6>
              <div class="right">
                <div class="box">
                  <span class="t1">当月拨打量:</span>
                  <span class="t2">{{ countCallNumberDataYNum1 }}</span>
                </div>
                <div class="box">
                  <span class="t1">当月接通量:</span>
                  <span class="t3">{{ countCallNumberDataYNum2 }}</span>
                </div>
                <div class="box">
                  <span class="t1">当月接通率:</span>
                  <span class="t4">{{ baifenbi }}%</span>
                  <!-- <span class="t4" v-if="countCallNumberDataYNum1==0">0%</span> -->
                  <!-- <span
                    class="t4"
                    v-else
                  >{{countCallNumberDataYNum2/countCallNumberDataYNum1*100 | num1()}}%</span>-->
                </div>
              </div>
            </div>
            <div class="schart-box">
              <div id="myChart" :style="{ height: '320px', width: '100%' }" />
            </div>
          </el-card>
        </el-col>
        <!-- <el-col :span="24">
                <el-card shadow="hover" class="" style="height:282px;">
                       <h4 style="margin-bottom:10px">预约客户数量</h4>
                     <el-table :data="orderLstData" height='222'>
                        <el-table-column prop="customerName" align="center" label="客户姓名"></el-table-column>
                        <el-table-column prop="customerComp" align="center" label="客户公司"  min-width="150"></el-table-column>
                        <el-table-column label="预约时间" align="center" min-width="150">
                            <template slot-scope="scope">{{ scope.row.remainTime | formatDate}}</template>
                        </el-table-column>
                        <el-table-column label="状态"  align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.status==0" style="color:#e66d06;">未提醒</span>
                                <span v-if="scope.row.status==1" style="color:green;">已提醒</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
        </el-col>-->
      </el-row>
      <!-- <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <ul class="ul1">
              <span>排名</span>
              <span>姓名</span>
              <span>分数</span>
            </ul>
            <vue-seamless-scroll :data="list110" :class-option="classOption" class="table-content">
              <ul class="ul2">
                <li v-for="(item,index) in list110" :key="index">
                  <span>{{index+1}}</span>
                  <span>{{item.name}}</span>
                  <span>{{item.score}}</span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </el-card>
        </el-col>
      </el-row>-->
      <!-- 获取将要到期资质客户列表 -->
      <!-- <el-dialog title="资质快到期客户列表" :visible.sync="dialogTableVisible">
            <el-table :data="getTimeOut">
                <el-table-column property="certificateName" align="center" label="资质名字"></el-table-column>
                <el-table-column label="开始时间" align="center" >
                    <template slot-scope="scope">{{ scope.row.startTime | formatDate}}</template>
                </el-table-column> 
                <el-table-column label="结束时间" align="center" >
                    <template slot-scope="scope">{{ scope.row.endTime | formatDate}}</template>
                </el-table-column> 
            </el-table>
      </el-dialog>-->
    </div>
    <div class="right">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-card shadow="hover" class="right1">
            <div class="top" @click="call">提醒事项>></div>
            <div class="scroll">
              <div
                class="info"
                v-for="(item, index) in orderLstData"
                :key="index"
              >
                <h4>{{ item.companyName }}</h4>
                <div class="tt">客户姓名:{{ item.customerName }}</div>
                <div class="tt">预约时间:{{ item.remainTime }}</div>
                <span class="c1" v-if="item.status == 0">未提醒</span>
                <span class="c2" v-if="item.status == 1">已提醒</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-card shadow="hover" class="right1">
            <div class="top2">公司公告</div>
            <div class="scroll2">
              <div
                class="info2"
                v-for="(item, index) in noticeList"
                :key="index"
                @click="tankuang(item)"
              >
                <div class="tt">
                  {{ item.noticeTitle }}
                  <span class="dian">·</span>
                </div>
                <div class="ttt">{{ item.noticeContent }}</div>
                <div class="tttt">发布时间:{{ item.createTime }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 公告弹框 -->
    <el-dialog title="公告" :visible.sync="dialogTableVisible2" width="700px">
      <div class="center6">
        <div class="top">{{ getRemainsData2.noticeTitle }}</div>
        <!-- <img class="gif" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595498460136&di=c5fc12b480954c03f113a5b4971ce538&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181104%2F247ec5c603414be9af6c2bfd4fd89095.gif" alt=""> -->
        <div class="ccc">{{ getRemainsData2.noticeContent }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao2" size="small" type="primary">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Schart from "vue-schart";
import {
  getCountCallNumber,
  getRemains,
  getNumber9,
  getCustomerEcharts,
  getNotice,
} from "@/api/index";
import vueSeamlessScroll from "vue-seamless-scroll";
// import { mapGetters, mapActions, mapState, mapMutations } from "vuex";
export default {
  name: "dashboard",
  data() {
    return {
      baifenbi: "",
      // g:3.14159256,
      year: "",
      value88888: "",
      dialogTableVisible: false,
      dialogTableVisible2: false,
      orderLstData: [],
      noticeList: [],
      customerData: {},
      getRemainsData2: {},
      countCallNumberDataX: [],
      countCallNumberDataY1: [],
      countCallNumberDataY2: [],
      countCallNumberDataY3: [],
      countCallNumberDataY4: [],
      countCallNumberDataYNum1: 0,
      countCallNumberDataYNum2: 0,
      data9: {},
      list110: [
        { name: "张三", score: 12 },
        { name: "李四", score: 45 },
        { name: "王二麻", score: 78 },
        { name: "师爷", score: 88 },
        { name: "教头", score: 66 },
        { name: "小阿悄", score: 16 },
        { name: "东邪", score: 99 },
        { name: "西毒", score: 168 },
        { name: "南帝", score: 56 },
        { name: "北丐", score: 888 },
        { name: "中神通", score: 999 },
      ],
      options2: {
        type: "line",
        title: {
          text: "",
        },
        bgColor: "#fbfbfb",
        labels: [1, 2, 3],
        datasets: [
          {
            label: "拨打数量",
            data: [164, 178, 150, 135, 160],
          },
          {
            label: "接通数量",
            data: [114, 138, 200, 235, 190],
          },
        ],
      },
    };
  },
  components: {
    Schart,
    vueSeamlessScroll,
  },
  computed: {
    // ...mapGetters(["getTimeOut"]),
    classOption() {
      return {
        singleHeight: 0,
        waitTime: 1000,
        step: 0.5,
        hoverStop: true,
        direction: 1,
        singleWidth: 0,
      };
    },
  },
  watch: {
    getTimeOut: function (val) {
      if (this.getTimeOut != null && this.getTimeOut.length > 0)
        this.dialogTableVisible = true;
    },
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(parseInt(value) * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let minute = date.getMinutes();
      let second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d;
    },
    formatDate2: function (value) {
      let date = new Date(parseInt(value) * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let minute = date.getMinutes();
      let second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    num1: function (value) {
      return value.toFixed(2);
    },
  },
  created() {
    this.getCustomerEcharts();
    this.getNumber9();
    this.getNotice();
  },
  mounted() {
    var date = new Date();
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    this.value88888 = y + "-" + m;
    console.log(this.value88888, "获取当前日期");
    this.getRemains();
    this.getCountCallNumber();
  },
  methods: {
    customer(e) {
      console.log("跳转", e);
      console.log("type9", localStorage.getItem("type9"));
      let type9 = localStorage.getItem("type9");
      if (type9 == 0) {
        console.log("跳资质");
        this.$router.push({
          name: "Customer",
          params: {
            id: e,
          },
        });
      } else if (type9 == 1) {
        this.$router.push({
          name: "CustomerManagement_zizhi",
          params: {
            id: e,
          },
        });
        console.log("跳普通");
      }
    },
    bindGetTime(e) {
      console.log(this.value88888);
      this.getCountCallNumber();
    },
    call() {
      let type9 = localStorage.getItem("type9");
      if (type9 == 0) {
        console.log("跳资质");
        this.$router.push({
          path: "/qualifications",
          query: {
            id: 1,
          },
        });
      } else if (type9 == 1) {
        this.$router.push({
          path: "/phone",
          query: {
            id: 1,
          },
        });
        console.log("跳普通");
      }
    },
    tankuang(item) {
      console.log(item);
      this.getRemainsData2 = item;
      this.dialogTableVisible2 = true;
    },
    quxiao2() {
      this.dialogTableVisible2 = false;
    },
    getCountCallNumber() {
      getCountCallNumber({
        time: this.value88888,
      }).then((res) => {
        if (res.data.length != 0) {
          console.log(res);
          this.countCallNumberDataX = res.data.x;
          this.countCallNumberDataY1 = res.data.y1;
          this.countCallNumberDataY2 = res.data.y2;
          this.countCallNumberDataY3 = res.data.y3;
          this.countCallNumberDataY4 = res.data.y4;
          // res.data.y1.forEach((item, index) => {
          //   this.countCallNumberDataYNum1 = eval(
          //     this.countCallNumberDataY1.join("+")
          //   );
          // });
          this.countCallNumberDataYNum1 = res.data.callCount;
          this.countCallNumberDataYNum2 = res.data.successCount;
          this.baifenbi = res.data.successRate;
          // res.data.y2.forEach((item, index) => {
          //   this.countCallNumberDataYNum2 = eval(
          //     this.countCallNumberDataY2.join("+")
          //   );
          // });
          this.drawLineData();
        }
      });
    },
    getRemains() {
      getRemains({
        pageNum: 1,
        pageSize: 9999999999999999999,
      }).then((res) => {
        console.log(res);
        this.orderLstData = res.rows;
      });
    },
    getNumber9() {
      getNumber9().then((res) => {
        console.log(res, "顶部信息");
        this.data9 = res.data;
      });
    },
    getCustomerEcharts() {
      getCustomerEcharts().then((res) => {
        this.customerData = res.data;
        console.log(res, "------中间统计数据------");
        // this.drawLine();
      });
    },
    drawLineData() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        xAxis: {
          data: this.countCallNumberDataX,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false, //去掉网格线
          },
          // 间隔显示
            axisLabel: {
              interval: 1,
            },
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 0,
          top: 50,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          padding: [5, 10],
        },
        yAxis: [
          {
            type: "value",
            name: "数量(次)",
            // interval: 2000,
            splitNumber : 10,
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: {
              show: false, //去掉网格线
            },
          },
          {
            type: "value",
            name: "时长(分钟)",
            splitNumber : 10,
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: {
              show: false, //去掉网格线
            },
          }
        ],
        legend: {
          data: ["拨打数量", "接通数量","有效时长","消耗时长"],
        },
        series: [
          {
            name: "拨打数量",
            yAxisIndex:0,
            itemStyle: {
              normal: {
                color: "#099cf8",
                lineStyle: {
                  color: "#099cf8",
                  width: 2,
                },
              },
            },
            smooth: true,
            type: "line",
            data: this.countCallNumberDataY1,
            animationDuration: 3000,
            animationEasing: "cubicInOut",
          },
          {
            name: "接通数量",
            yAxisIndex:0,
            smooth: true,
            type: "line",
            itemStyle: {
              normal: {
                color: "#ff8c2d",
                lineStyle: {
                  color: "#ff8c2d",
                  width: 2,
                }
              },
            },
            data: this.countCallNumberDataY2,
            animationDuration: 3000,
            animationEasing: "quadraticOut",
          },
          {
            name: "有效时长",
            yAxisIndex:1,
            itemStyle: {
              normal: {
                color: "#13e065",
                lineStyle: {
                  color: "#13e065",
                  width: 2,
                },
              },
            },
            smooth: true,
            type: "line",
            data: this.countCallNumberDataY3,
            animationDuration: 3000,
            animationEasing: "cubicInOut",
          },
          {
            name: "消耗时长",
            smooth: true,
            yAxisIndex:1,
            type: "line",
            itemStyle: {
              normal: {
                color: "#9c69fcf3",
                lineStyle: {
                  color: "#9c69fcf3",
                  width: 2,
                }
              },
            },
            data: this.countCallNumberDataY4,
            animationDuration: 3000,
            animationEasing: "quadraticOut",
          },
        ],
      });
    },
    getNotice() {
      getNotice({
        pageNum: 1,
        pageSize: 100,
      })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.noticeList = res.rows;
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },
    drawLine() {
      var _this = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      myChart.setOption({
        legend: {
          orient: "vertical",
          left: "right",
          data: ["已合作意向客户", "意向客户", "待开发客户", "已开发客户"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "60%",
            center: ["40%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                formatter: "{b}: ({d}%)",
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 12,
                },
              },
            },
            data: [
              { value: _this.customerData.cooperated, name: "已合作意向客户" },
              { value: _this.customerData.Intention, name: "意向客户" },
              { value: _this.customerData.develop, name: "待开发客户" },
              { value: _this.customerData.developed, name: "已开发客户" },
            ],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ["#51ca00", "#f67879", "#4878e7", "#f7991b"];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      });
    },
  },
};
</script>


<style lang='scss' scoped>
.left {
  width: 76%;
}
.el-card {
  border-radius: 6px;
}
.t1 {
  font-size: 19px;
  color: #222;
  margin: 10px 0;
  box-sizing: border-box;
  padding-left: 30px;
  font-weight: 700;
}
.right {
  width: 23%;
}
.top8 {
  background-color: #fff;
  height: 50px;
  width: 100%;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.countCallNumber h4 {
  float: left;
}
.countCallNumber img {
  width: 25px;
  height: 25px;
  float: right;
  margin-right: 10px;
  margin-top: -3px;
}
.countCallNumber {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.countCallNumber span {
  float: right;
  font-size: 14px;
  color: #666;
}
.countCallNumber h6 {
  display: inline-block;
  width: 40%;
  margin-top: 3px;
}
.countCallNumber h6 span {
  float: none;
}
.countCallNumber span i {
  font-style: normal;
  color: #000;
  display: flex;
  justify-content: space-between;
}
.countCallNumber .right {
  width: 60%;
  display: flex;
  justify-content: space-between;

  .box {
    display: flex;
    width: 33%;
    justify-content: center;
    align-items: center;
    .t1 {
      font-size: 20px;
      color: #888585;
    }
    .t2 {
      font-size: 20px;
      color: #33abf3;
      font-weight: bold;
    }
    .t3 {
      font-size: 20px;
      color: #ff9f52;
      font-weight: bold;
    }
    .t4 {
      font-size: 20px;
      color: #42b871;
      font-weight: bold;
    }
  }
}
.el-row {
  margin-bottom: 20px;
}
.index_Data {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px 0;
}
.index_Data .box {
  width: 20%;
  float: left;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  box-sizing: border-box;
  // padding-left: 10px;
  border-right: 1px solid #cccccc;
  img {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .img {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .img2 {
    display: inline-block;
    width: 46px;
    height: 46px;
    border-radius: 50%;
  }
  .box1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 15px;
    .t2 {
      font-size: 25px;
      color: #555;
      font-weight: 550;
      // text-align: center;
    }
    .t3 {
      font-size: 16px;
      color: #888585;
    }
  }
  .box2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 15px;
    cursor: pointer;
    .t2 {
      font-size: 25px;
      color: #555;
      font-weight: 550;
      // text-align: center;
    }
    .t3 {
      font-size: 16px;
      color: #888585;
    }
  }
  .box2:hover {
    .t2 {
      font-size: 25px;
      color:#33abf3 ;
      font-weight: 550;
      // text-align: center;
    }
    .t3 {
      font-size: 16px;
      color: #33abf3;
    }
  }
}

.el-row {
  margin-bottom: 20px;
}
.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}
.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}
.grid-num {
  font-size: 30px;
  font-weight: bold;
}
.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}
.grid-con-1 .grid-con-icon {
  background: #33abf3;
}
.grid-con-1 .grid-num {
  color: #33abf3;
}
.grid-con-2 .grid-con-icon {
  background: #81dae2;
}
.grid-con-2 .grid-num {
  color: #81dae2;
}
.grid-con-3 .grid-con-icon {
  background: #b6a1dc;
}
.grid-con-3 .grid-num {
  color: #b6a1dc;
}
.grid-con-4 .grid-con-icon {
  background: #ff9f52;
}
.grid-con-4 .grid-num {
  color: #ff9f52;
}
.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}
.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}
.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}
.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}
.user-info-list span {
  margin-left: 70px;
}
.mgb20 {
  margin-bottom: 20px;
}
.todo-item {
  font-size: 14px;
}
.todo-item-del {
  text-decoration: line-through;
  color: #999;
}
.schart {
  width: 100%;
  height: 300px;
  position: relative;
}
.t8 {
  color: #333;
  font-size: 15px;
  font-weight: 550;
}
.schart-box {
  display: inline-block;
  margin: 20px;
  width: 100%;
}
.schart {
  width: 680px;
  height: 400px;
}
.content-title {
  clear: both;
  font-weight: 400;
  line-height: 50px;
  margin: 10px 0;
  font-size: 22px;
  color: #1f2f3d;
}
.right1 {
  position: relative;
  padding-top: 30px;
  .top {
    position: absolute;
    top: 10px;
    left: 0;
    color: #fff;
    background-color: #33abf3;
    border-radius: 0 20px 20px 0;
    padding: 4px 18px;
    font-size: 22px;
    cursor: pointer;
  }
  .scroll {
    overflow-y: auto;
    max-height: 380px;
  }
  .scroll2 {
    overflow-y: auto;
    max-height: 400px;
  }
  .scroll::-webkit-scrollbar {
    width: 0;
  }
  .scroll2::-webkit-scrollbar {
    width: 0;
  }
  .info {
    border-bottom: 1px solid #cccccc;
    padding: 10px 0;
    position: relative;
    h4 {
      font-size: 19px;
      color: #333;
    }
    .tt {
      color: #979595;
      margin-top: 5px;
      font-size: 17px;
      font-family: PingFangSC-Semibold, sans-serif;
    }
    .c1 {
      color: #ff9f52;
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
    }
    .c2 {
      color: #33abf3;
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 17px;
    }
  }
  .top2 {
    position: absolute;
    top: 10px;
    left: 0;
    color: #fff;
    background-color: #ff9f52;
    border-radius: 0 20px 20px 0;
    padding: 4px 18px;
    font-size: 22px;
  }
  .info2 {
    border-bottom: 1px solid #cccccc;
    position: relative;
    margin-top: 10px;
    h3 {
      font-size: 18px;
      color: #222;
    }
    .tt {
      color: #333;
      margin-top: 5px;
      font-size: 17px;
      font-weight: 550;
      position: relative;
      font-family: PingFangSC-Semibold, sans-serif;
    }
    .ttt {
      font-size: 16px;
      color: #888;
      margin-top: 5px;
      font-family: PingFangSC-Semibold, sans-serif;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .tttt {
      font-size: 14px;
      color: #888;
      margin-top: 5px;
      font-family: PingFangSC-Semibold, sans-serif;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .dian {
      font-weight: bold;
      color: #555;
      font-size: 16px;
      position: absolute;
      top: 50%;
      left: -15px;
      transform: translateY(-50%);
    }
  }
}
.center6 {
  width: 90%;
  margin: 0 auto;
  .top {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-size: 24px;
  }
  .ccc {
    width: 100%;
    margin-top: 20px;
    font-size: 16px;
  }
  .gif {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
}

.table-content {
  max-height: 300px;
  overflow: hidden;
}
.ul1 {
  width: 100%;
  span {
    display: inline-block;
    text-align: center;
    width: 33%;
    padding: 20px 0;
  }
}
.ul2 {
  width: 100%;
  li {
    box-sizing: border-box;
    padding: 10px 0;
    background-color: #4e6ef2;
    color: #ffffff;
    margin-top: 5px;
    span {
      display: inline-block;
      width: 33%;
      text-align: center;
    }
  }
}
</style>
